<template>
	<view class="body_box">
		<view>
			<u-search 
				placeholder="请输入关键字" 
				v-model="keyword" 
				@search="getSearchList" 
				@clear="cancelSearch"
				@custom="getSearchList"
			></u-search>
		</view>
		
		<!-- 搜索列表 -->
		<view v-if="searchList.length > 0">
			<scroll-view class="search-box" :scroll-y="true">
				<view
					v-for="(item, key) in searchList"
					@click="searchModelClik(key)"
				>{{item.name}}</view>
			</scroll-view>
		</view>
		
		<!-- 选择模块 -->
		<view v-if="searchList.length === 0">
			<!-- 顶部 机型选择 -->
			<scroll-view :scroll-x="true" style="white-space: nowrap">
				<view 
					class="type-box" 
					:style="selInfo.type.dictValue != item.dictValue ? '': 'border-bottom: 4px solid #19be6b;'" 
					v-for="(item, key) in typeArr"
					@click="typeClick(key)"
				>{{item.dictLabel}}</view>
			</scroll-view>
			
			<view class="row-box" style="margin-top: 30rpx;">
				<scroll-view class="left-box" :scroll-y="true">
					<view 
						v-for="(item,key) in brandArr" 
						:style="selInfo.brand.dictValue != item.dictValue ? '': 'border-bottom: 4px solid #19be6b;'"
						@click="brandClik(key)"
					>
						{{item.dictLabel}}
					</view>
				</scroll-view>
				<scroll-view class="right-box" :scroll-y="true">
					<view
						v-for="(item, key) in modelArr"
						:style="selInfo.model.id != item.id ? '' : 'background-color: #dbf1e1;'"
						@click="modelClik(key)"
					>{{item.name}}</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keyword: null,
				selInfo: {
					type: {},
					brand: {},
					model: {},
				},
				queryParams:{
					modelType: undefined,
					brand: undefined
				},
				typeArr: [],
				brandArr: [],
				modelArr: [],
				searchList: [],
			}
		},
		created() {
			this.init();
		},
		methods: {
			async init() {
				await this.$request("/appShopApi/model/queryTypeDataList", 'get', {dictType: 'model_type'}).then(res => {
					this.typeArr = res.data;
					this.queryParams.modelType = this.typeArr[0].dictValue
					this.typeClick(0);
				})
				
				await this.$request("/appShopApi/model/queryTypeDataList", "get", {dictType: 'mill_type_mobile'}).then(res =>{
					this.brandArr = res.data;
					this.queryParams.brand = this.brandArr[0].dictValue;
					this.brandClik(0);
				})
				
				//this.getModelList();
			},
			getModelList() {
				this.$request("/appShopApi/model/queryModelList","get", this.queryParams).then(res =>{
					this.modelArr = res.data;
				})
			},
			getSearchList(e) {
				if(e){
					console.log("搜索：", e);
					const params = {name: e}
					this.$request("/appShopApi/model/queryModelList","get", params).then(res =>{
						if(res.data.length == 0){
							uni.showToast({
								title:"没有匹配数据",
								icon: 'none'
							})
						}
						this.searchList = res.data;
					})
				}
			},
			cancelSearch(e) {
				this.searchList = [];
			},
			// 类型选择
			typeClick(key) {
				this.selInfo.type = this.typeArr[key];
				this.queryParams.modelType = this.typeArr[key].dictValue;
			},
			//品牌选择
			brandClik(key) {
				this.selInfo.brand = this.brandArr[key];
				this.queryParams.brand = this.brandArr[key].dictValue;
				this.getModelList();
			},
			searchModelClik(key) {
				this.selInfo.model = this.searchList[key];
				this.$emit("change", this.selInfo.model);
			},
			modelClik(key) {
				this.selInfo.model = this.modelArr[key];
				this.$emit("change", this.selInfo.model);
			}
		}
	}
</script>

<style scoped lang="scss">
	.type-box {
		display: inline-block;
		margin: 20rpx 0 0 20rpx;
		width: 100rpx;
		padding: 10rpx 20rpx;
		font-size: 38rpx;
		font-weight: 900;
		text-align: center;
	}
	.left-box {
		width: 30vw;
		height: 80vh;
		view {
			padding: 20rpx;
			text-align: center;
			font-size: 32rpx;
			font-weight: 600;
			line-height: 100rpx;
		}
	}
	.right-box {
		width: 70vw;
		height: 80vh;
		view {
			padding: 20rpx;
			font-size: 30rpx;
			line-height: 100rpx;
		}
	}
	.search-box {
		height: 90vh;
		view {
			padding: 20rpx;
			font-size: 30rpx;
			line-height: 100rpx;
		}
	}
</style>
